import React from 'react'
import {withLogin} from '@/utils/hoc'
import { Layout, Menu, Breadcrumb,Row, Col,Button } from 'antd';
import { UserOutlined, LaptopOutlined, NotificationOutlined,SlackOutlined,HomeOutlined,ControlOutlined,TeamOutlined,SecurityScanOutlined } from '@ant-design/icons';
import { Switch,Route,Redirect } from 'react-router-dom';
// import store from '@/store'
import {bindActionCreators} from 'redux'
import {connect} from 'react-redux'
import userAction from '@/store/actions/user'

import Home from './manage/Home'
import Access from './manage/Access'
import Interview from './manage/interview/Default'
import User from './manage/user/Default'
import { withRedux, withStore } from '../utils/hoc';

const { SubMenu } = Menu;
const { Header, Content, Sider } = Layout;

const pathName = {
    '/manage':'首页',
    '/interview':'电视剧管理',
    '/user':'用户管理',
    '/hot': '列表',
    '/add':'添加',
    '/edit':'编辑'
}

const mapStateToProps = function(state,ownProps){
    console.log('mapStateToProps',state,ownProps)
    return {
        // username:state.userInfo.username,
        // 模块化后
        username:state.user.userInfo.username,
    }
}
const mapDispatchToProps = function(dispatch,ownProps){
    // return {
    //     logout(){
    //         // dispatch({type:'logout'})
    //         // actionCreate简化
    //         dispatch(userAction.logout())
    //     }
    // }

    // 使用bindActionCreators
    return bindActionCreators(userAction,dispatch)
}

// function bindActionCreators(actions,dispatch){
//     const data = {}
//     for(let key in actions){
//         data[key] = function(){
//             dispatch(actions[key](arguments))
//         }
//         // {login(){},logout(){}}
//     }
//     return data
// }

@withLogin
@connect(mapStateToProps,mapDispatchToProps)
class Manage extends React.Component{
    state = {
        menu:[
            {
                path:'/home',
                text:'首页',
                icon:<HomeOutlined />,
            },
            {
                path:'/interview',
                text:'电视剧管理',
                icon:<ControlOutlined />,
                children:[
                    {
                        path:'/hot',
                        text:'热门电视剧列表'
                    },
                    {
                        path:'/Britain',
                        text:'英剧列表'
                    },
                    {
                        path:'/American',
                        text:'美剧列表'
                    },
                    {
                        path:'/SouthKorea',
                        text:'韩剧列表'
                    },
                    {
                        path:'/Japan',
                        text:'日剧列表'
                    },
                    {
                        path:'/China',
                        text:'国产剧列表'
                    },
                    {
                        path:'/HongKong',
                        text:'港剧列表'
                    },
                    {
                        path:'/JapaneseAnimation',
                        text:'日本动画列表'
                    },
                    {
                        path:'/variety',
                        text:'综艺列表'
                    },
                    {
                        path:'/documentary',
                        text:'纪录片列表'
                    },
                    {
                        path:'/add',
                        text:'添加电视剧'
                    },
                ]
            },
            {
                path:'/user',
                text:'用户管理',
                icon:<TeamOutlined />,
                children:[
                    {
                        path:'/',
                        text:'用户列表'
                    },
                    {
                        path:'/add',
                        text:'添加用户'
                    },
                ]
            },
            {
                path:'/access',
                text:'权限管理',
                icon:<SecurityScanOutlined />
            }
        ],
        breadcrumb:[],
        breadcrumbRoutes:[]
    }

    // 使用箭头函数定义类的方法（浏览器已支持）
    changeMenu = ({ item, key, keyPath, domEvent })=>{
        console.log('changeMenu',this)
        // this.props.history.push(key)
        this.props.history.push({
            pathname:key,
            // search:'page=1&size=10',
            // params:{a:10,b:20},
            // laoxie:{username:'laoxie',age:18},
            // state:{c:20,d:30}
        })
    }
    initBreadCrumb = (location=this.props.location)=>{
        console.log('listen',location)
        // "/manage/interview/list"
        // const paths = location.pathname.split(/(?<=\w)\/(?=\w)/)
        const paths = location.pathname.split(/\b(?=\/)/)
        const breadcrumbRoutes = paths.map(item=>{
            return {
                path:item,
                breadcrumbName:pathName[item]
            }
        })
        this.setState({
            breadcrumb:paths,
            breadcrumbRoutes
        })
    }
    componentDidMount(){
        this.initBreadCrumb()
        this.props.history.listen(this.initBreadCrumb)

        // 监听redux数据修改，实现组件刷新
        // store.subscribe(()=>{
        //     this.forceUpdate();
        // })
    }
    render(){
        console.log('Manage.props',this.props)
        const {userInfo,dispatch,username,logout} = this.props;
        const {menu,breadcrumb,breadcrumbRoutes} = this.state;
        const baseUrl = this.props.match.path;

        // const {userInfo} = store.getState();
        return (
            <Layout style={{height:'100%'}}>
            <Header className="header" style={{padding:'0 10px',color:'#fff'}}>
                <Row>
                    <Col span={16}>
                        <SlackOutlined style={{color:'#ff0',fontSize:40,verticalAlign:'middle',marginRight:5}} />
                        豆瓣热门电视剧后台管理系统
                    </Col>
                    <Col span={8} style={{textAlign:'right'}}>
                        {username}<Button type="link" onClick={
                            ()=>{
                                logout(this.props)
                            }
                            
                        }
                        >退出</Button>
                    </Col>
                </Row>
              
            </Header>
            <Layout>
              <Sider width={200} className="site-layout-background">
                <Menu
                  mode="inline"
                  defaultSelectedKeys={[baseUrl+'/home']}
                  defaultOpenKeys={[baseUrl+'/interview']}
                  style={{ height: '100%', borderRight: 0 }}
                  onClick={this.changeMenu}
                >
                    {
                        menu.map(item=>{
                            if(item.children){
                                return (
                                    <SubMenu key={baseUrl+item.path} icon={item.icon} title={item.text}>
                                        {
                                            item.children.map(it=><Menu.Item key={baseUrl+item.path + it.path}>{it.text}</Menu.Item>)
                                        }
                                    </SubMenu>
                                )
                            }else{
                                return <Menu.Item key={baseUrl+item.path} icon={item.icon}>{item.text}</Menu.Item>
                            }
                        })
                    }
                  
                </Menu>
              </Sider>
              <Layout style={{ padding: '0 24px 24px' }}>
                {/* <Breadcrumb style={{ margin: '16px 0' }}>
                    {
                        breadcrumb.map(item=>(
                            <Breadcrumb.Item key={item} href={'#'+item}>{pathName[item]}</Breadcrumb.Item>
                        ))
                    }
                  
                </Breadcrumb> */}
                <Breadcrumb routes={breadcrumbRoutes}>
                </Breadcrumb>
                <Content
                  className="site-layout-background"
                  style={{
                    padding: 24,
                    margin: 0,
                    minHeight: 280,
                  }}
                >
                  <Switch>
                    <Route path={baseUrl+"/home"} component={Home} />
                    <Route path={baseUrl+"/interview"} component={Interview} />
                    <Route path={baseUrl+"/user"} component={User} />
                    <Redirect from={baseUrl} to={baseUrl+"/home"} />
                  </Switch>
                </Content>
              </Layout>
            </Layout>
          </Layout>
        )
    }
}

// Manage = withLogin(Manage)
// Manage = withRedux(Manage)
// Manage = withStore((state)=>{
//     return {
//         username:state.userInfo.username
//     }
// },dispatch=>({
//     logout(){
//         dispatch({type:'logout'})
//     }
// }))(Manage)


// Manage = connect(
//     mapStateToProps,
//     mapDispatchToProps
// )(Manage)

export default Manage;